<template>
  <div class="fixed bottom-0 left-0 right-0 navbar bg-base-100 shadow-xl border-t border-base-300 flex items-center justify-between py-2">
    <a class="btn btn-ghost text-base"  @click="showContent()" >
      <span v-if="!isMobile()">{{ courseStore.courseData?.course?.title }}  </span>
      <span class="text-sm text-gray-700">{{courseStore.courseData?.title }}</span>
    </a>
   
    <div class="flex items-center justify-start  flex-1 cursor-pointer" @click="toPreData()" v-if="courseStore.currentIndex">
      <button class="btn btn-ghost">
        <component :is="ArrowLeftCircleIcon" class="w-5 h-5" />
      </button>
      <div> {{ courseStore.getPrevEnglish() }} </div>
    </div>
    <div class="flex items-center gap-4">
       <button class="btn btn-ghost"  @click="showContent()">
          <component :is="Bars4Icon" class="w-5 h-5" />
      </button>
      <button class="btn btn-ghost" @click="toggleFullScreen" v-if="!isMobile()">
        <component :is="ArrowsPointingOutIcon" class="w-5 h-5" />
      </button>
      <nuxt-link to="/course" v-if="!isMobile()">
        <button class="btn btn-ghost">
          <component :is="HomeIcon" class="w-5 h-5" />
        </button>
      </nuxt-link>
    </div>
  </div>
  <StudyContent :isOpen="isContentOpen" @close=" isContentOpen = false" />
</template>
<script setup lang="ts">
// 导入所需的图标组件
import {
  Bars4Icon,
  ArrowsPointingOutIcon,
  HomeIcon,
  ChevronLeftIcon,
  ArrowLeftCircleIcon,
} from "@heroicons/vue/24/solid";

import { useCourseStore } from "~/stores/course";
import { ref } from 'vue';
import { isMobile } from "~/composables/common/mobile";

const courseStore = useCourseStore();
const isContentOpen = ref(false);
// 切换全屏
const toggleFullScreen = () => {
  if (!document.fullscreenElement) {
    document.documentElement.requestFullscreen().catch((err) => {
      console.error(`全屏请求出错: ${err.message}`);
    });
  } else {
    if (document.exitFullscreen) {
      document.exitFullscreen();
    }
  }
};
const toPreData = () => {
  courseStore.toPrevData();
}
const showContent = () => {
  isContentOpen.value = !isContentOpen.value;
}
</script>